<template>
	<view :id="'id_' + readId">
		<slot name="title">
			<tm-sheet
				no-level
				@click="emits('title-click')"
				:transprent="props.transprent"
				color="grey-3"
				v-if="_title !== ''"
				:height="50"
				_class="flex flex-row flex-row-center-start"
				:margin="[props.margin[0], 0]"
				:padding="[props.padding[0], 0]"
			>
				<tm-text :userInteractionEnabled="false" :font-size="24" _class="text-weight-b opacity-6" :label="_title"></tm-text>
			</tm-sheet>
		</slot>
		<tm-sheet
			@click="itemClick"
			color="white"
			:border="props.showBorder ? 1 : 0"
			:transprent="props.transprent"
			borderDirection="bottom"
			:margin="props.margin"
			:padding="props.padding"
		>
			<view :eventPenetrationEnabled="true" class="flex-1">
				<slot></slot>
			</view>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
/**
 * 列表索引项目
 * @description 索引列表项目，内部只能放置在tm-indexes组件中。
 */
import { computed, PropType, ref, getCurrentInstance, onUnmounted, onMounted, onUpdated, nextTick } from 'vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue'
const proxy = getCurrentInstance()?.proxy ?? null
const emits = defineEmits(['click', 'title-click'])
const props = defineProps({
	margin: {
		type: Array as PropType<Array<number>>,
		default: () => [0, 0]
	},
	padding: {
		type: Array as PropType<Array<number>>,
		default: () => [32, 0]
	},
	height: {
		type: Number,
		default: 100
	},
	//如果title不为空，此组件就会当分类标题来显示，并隐藏内容。
	title: {
		type: [String, Number],
		default: ''
	},
	// 右边快捷显示的标题，只能是一个字符。
	//注意如果title为空时，这个才会显示在右边。不空此字段无任何意义。
	navTitle: {
		type: [String, Number],
		default: ''
	},
	transprent: {
		type: Boolean,
		default: false
	},
	showBorder: {
		type: Boolean,
		default: true
	}
})

const _title = computed(() => props.title)
const _navTitle = computed(() => props.navTitle)
const readId = uni.$tm.u.getUid(1)
let _itemHeight = 0
//父级方法。
let parent: any = proxy.$parent

while (parent) {
	if (parent?.compentNameId == 'tmIndexesId' || !parent) {
		break
	} else {
		parent = parent?.$parent ?? undefined
	}
}
if (parent) {
	parent.pushKey(_itemHeight, readId, String(_title.value), String(_navTitle.value))
}
onUnmounted(() => parent.delKey(_itemHeight, readId))
onMounted(() => getRect())
onUpdated(() => getRect())
function getRect() {
	let id = '#id_' + readId
	// #ifdef MP
	uni.createSelectorQuery()
		.in(proxy)
		.select(id)
		.boundingClientRect()
		.exec((ret) => {
			_itemHeight = ret[0].height
			parent.pushKey(ret[0].height, readId, String(_title.value), String(_navTitle.value))
		})
	// #endif
}
function itemClick() {
	emits('click')
}
</script>

<style></style>
